import React, { Component } from 'react'
import { connect } from 'dva';

import { Table, Drawer } from 'antd';
import Form from './components/ExceptionSearchForm';
import { checkInit } from '@/utils/util';
import Record from './components/Record';
import Ellipsis from '@/components/Ellipsis';


export interface IProps {
  dispatch?: ({ type }: { type: string, payload?: any }) => Promise<any>;
  children?: React.ReactNode;
  loading: boolean;
  buttons?: Array<any>;
  cond?: any,
  id?: string;
  bindData: {
    group: Array<any>;
    question: String[];
  },
  list: {
    data: Array<any>;
    dataCnt: number;
  };
}

const ONE_PAGE_SIZE = 10;


@connect(({ analyse_charge, menu }) => ({
  list: analyse_charge.chargingErrorList || {},
  cond: analyse_charge.chargingErrorCond || {},
  buttons: menu.buttons,
}))
class Exception extends Component<IProps, any> {

  state = {
    current: 0,
    record: null,
    showRecord: false,
    data: { score: 100 }
  }

  queryData(params) {
    const { dispatch } = this.props;

    dispatch({
      type: 'analyse_charge/queryChargingErrorPage',
      payload: params
    });
  }

  initCurrent = () => {
    this.setState({
      current: 0
    })
  }

  componentDidMount() {
    const { dispatch } = this.props;
    checkInit() ? dispatch({ type: `analyse_charge/initChargingErrorCond` }) : this.queryData({ pageNum: 1, pageSize: 10 })
  }

  showRecord = (v) => {
    this.setState({ showRecord: true, record: v })
  }

  onShowSizeChange = (current, pageSize) => {
    const { dispatch, cond } = this.props;
    cond.pageSize = pageSize;
    dispatch({ type: `analyse_charge/updateChargingErrorCond`, payload: cond })
  }

  render() {
    const { list, buttons } = this.props;
    const { data = [], dataCnt = 0 } = list;

    const btnList = {};
    if (Array.isArray(buttons)) {
      buttons.forEach(item => {
        btnList[item.name] = item.name
      });
    }

    const columns = [
      {
        title: '站点名称',
        dataIndex: 'station',
        key: 'station',
      },
      {
        title: '充电桩名称',
        dataIndex: 'name',
        key: 'name'
      },
      {
        title: '充电口号',
        dataIndex: 'chargingPortNumber',
        key: 'chargingPortNumber',

      },
      {
        title: '最新断电时间',
        dataIndex: 'lastPowerFailureTime',
        key: 'lastPowerFailureTime',
      },
      {
        title: '异常断电次数/次',
        dataIndex: 'errorPowerFailureQuantity',
        key: 'errorPowerFailureQuantity',
        render: (text, record) => (
          <a onClick={this.showRecord.bind(this, record)}>{text}</a>
        )
      },
    ];

    const ans = Array.isArray(data) ? data.map((it, index) => ({
      ...it,
      key: index,
    })) : []


    const pagination = {
      total: dataCnt,
      showTotal: total => `共 ${total} 条`,
      current: this.state.current,
      showSizeChanger: true,
      pageSizeOptions: ['10', '20', '50', '100'],
      onShowSizeChange: this.onShowSizeChange,
      onChange: (current) => {
        this.setState({ current }, () => this.queryData({ pageNum: current }));

      },
    };

    return (
      <div>
        <Form current={this.state.current} initCurrent={this.initCurrent} new={!!btnList['新增']} />
        <Table
          columns={columns}
          dataSource={ans}
          loading={this.props.loading}
          pagination={pagination}
          bordered
        />
        <Drawer
          title="异常断电统计"
          placement="right"
          onClose={() => this.setState({ showRecord: false })}
          visible={this.state.showRecord}
          width={800}
          destroyOnClose={true}
          bodyStyle={{ height: 'calc(100% - 91px)' }}
        >
          <Record record={this.state.record} />
        </Drawer>
      </div>
    );
  }
}

export default Exception;
